<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="10">
		<tr>
			<td></td>
			<td>书籍名称</td>
			<td>出版日期</td>
			<td>价格</td>	
			<td>购买数量</td>	
			<td>操作</td>						
		</tr>
        <tr v-for="(book, index) in  books">
            <td> {{ index+1 }} </td>
            <td> {{ book.bookName }} </td>
            <td> {{ book.publicationTime }} </td>
            <td> ￥{{ book.price }} </td>
            <td> 
                <button @click="sub(index)" :disabled="book.num <= 1" style="font-size: 20px;"> - </button>
                                 {{ book.num }}
                <button @click="add(index)" style="font-size: 20px;"> + </button>
            </td>
            <td>
               <button @click="removeBook(index)">移除</button>
            </td>
        </tr>		
		
	</table>
	<h1>总价格：￥<span>{{totalPrice.toFixed(2)}}</span></h1>

    <script>
        var book = new Vue({
            el:"#book",
            data: {
               books:[
                  {
                    bookName: 'java从入门到放弃',
                    publicationTime: '2010-10',
                    price: 60,
                    num: 1,
                  },
                  {
                    bookName: 'PHP从入门到放弃',
                    publicationTime: '2012-10',
                    price: 90,
                    num: 1,
                  },
                  {
                    bookName: 'Python从入门到放弃',
                    publicationTime: '2013-10',
                    price: 80.01,
                    num: 1,
                  },
                  {
                    bookName: '什么都是从入门到放弃',
                    publicationTime: '2011-10',
                    price: 70.9,
                    num: 1,
                  },
               ],
               counter: 1,
            },
            methods:{
                add(index){
                    this.books[index].num++;
                },
                sub(index){
                    this.books[index].num--;
                },
                removeBook: function(index){
                    this.books.splice(index,1);
                },
            },

            computed:{
                totalPrice(){
                    let totalPrice=0;
                    for(let i=0;i<this.books.length;i++)
                    {
                        totalPrice+=this.books[i].price*this.books[i].num;
                    }
                    return totalPrice;
                }
            }

        });
    </script>    
</body>
</html>